import { Layout,Breadcrumb, Button, Table, Space, Statistic, Col } from 'antd';
import { Link } from 'react-router-dom';
import './details.less';
import Orderi from './table/orderi'
import { ExclamationCircleTwoTone } from '@ant-design/icons';
const { Countdown } = Statistic;
const deadline = Date.now() + 1000 * 15 * 60  + 1000 * 0; // Moment is also OK
const { Content } = Layout;

function Details() {
  //倒计时
  const time =
  <span>
    <Col span={24} style={{ marginTop: 3,display:'inline-block',fontSize:16 }}>
      <Countdown value={deadline} format=" m 分 s 秒" />
    </Col>
  </span>
  //订单信息

  return (
    <div className='zdetails'>
      <Layout style={{ padding: '0 20px 20px 24px' }}>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <p>订单详情</p>
          <Breadcrumb.Item>
            <Link to="/home/orderManege/listOrder">订单列表</Link></Breadcrumb.Item>
          <Breadcrumb.Item>订单详情</Breadcrumb.Item>
        </Breadcrumb>
        <Content className='zcon'>
          <div className='zdiv1'>
            <p>
              <ExclamationCircleTwoTone className='zfont' />
              <span>当前订单状态：等待付款，{time}内未付款，订单将自动关闭</span>
            </p>
            <p>
              <Space>
                <Button>修改地址</Button>
                <Button>修改服务</Button>
                <Button>修改价格</Button>
                <Button>关闭订单</Button>
                <Button>备注订单</Button>
              </Space>
            </p>
          </div>
          <div className="zdiv2">
            <h4>订单信息</h4>
            <Orderi/>
          </div>
        </Content>
      </Layout>
    </div>
  )
}
export default Details